<!-- 设备监控列表 -->
<template>
	<uv-navbar :fixed="true" :placeholder="true" :title="title" left-arrow @leftClick="$onClickLeft" />
	<view class="container">
		<view class="bg-white">
			<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
		</view>
		<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
			<view v-for="item in stationList" :key="id" class="li">
				<view class="top">
					<view class="top-content">
						<view class="left">
							<view class="stationName">
								{{item.deviceName || item.blowerName}}
							</view>
							<view class="statusView">
								<view class="status1">
									<view class="com-state">
										<!-- <image class="state" src="@/static/images/station/com-normal.svg"></image> -->
										<text class="status-text1"> {{statusMap[item.deviceStatus]}}</text>
									</view>
								</view>

							</view>
						</view>
						<!-- 授权设置 -->
						<view class="status-collect">
							<view class="setting">

							</view>
						</view>

						<view class="check">
							<navigator style="display: flex;align-items: center;"
								:url="`/pages/components/pages/monitor/components/monitorDetail?detailId=${item.id}`">
								<view class="txt">查看</view>
								<view> > </view>
							</navigator>
						</view>
					</view>

				</view>
				<view class="bottom">
					<view class="bottom-list" v-for="every in fieldList" :key="every.prop">
						<text>{{every.title}}:</text>
						<text selectable v-if="item[every.prop] == null">--</text>
						<!-- <text selectable v-else>{{item[every.prop] }}</text> -->

						<text selectable v-else>{{getMappedText(every.prop, item[every.prop]) }}</text>
					</view>

				</view>
			</view>
		</view>
		<uv-empty v-if="stationList.length == 0" mode="list"></uv-empty>
	</view>
</template>


<script setup>
	import {
		ref,
		computed,
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {
		useMainStore
	} from '@/store/store'
	import {
		storeToRefs
	} from 'pinia'
	import globalConfig from "@/utils/constant.js";
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		formatDateTime,
		kmUnit
	} from '@/utils/util'
	import {
		orderGetOrders,
		orderReceive
	} from '@/api/order'
	import {
		reqCharge
	} from "@/api/model/chargingStation"
	import {reqWindMonintorList} from "@/api/model/windEnergy.js"
	import {
		reqStorageList
	} from "@/api/model/storageEnergy"
	const main = useMainStore()
	const {
		isLogin
	} = storeToRefs(main)
	const title = ref('监控管理')

	const pageNum = ref(1)
	const pageSize = ref(10)
	const orders = ref([])
	const modelId = ref(null)
	const statusMap = {
		'-1': '未上线',
		0: '空闲',
		1: '车桩相连',
		2: '充电中',
		4: '故障',
	}

	const tabList = ref([{
			type: -1,
			name: '逆变器',
		}, {
			type: 0,
			name: '汇流箱',
		}, {
			type: 1,
			name: '气象站'
		},
		{
			type: 2,
			name: '采集器'
		},
		{
			type: 3,
			name: '电表'
		},

	])
	const stationList = ref([{
			"id": "00001",
			"status": 0,
			"name": "大长兴一号风机",
			"deviceId": "DCX-FJ-1",
			"dailyPower": "3.01MWh",
			"activePower": "1369.48kw",
			"windSpeed": "9.21m/s",
		},
		{
			"id": "00002",
			"status": 0,
			"name": "大长兴二号风机",
			"deviceId": "DCX-FJ-2",
			"dailyPower": "3.23MWh",
			"activePower": "1126.54kw",
			"windSpeed": "7.45m/s",
		},
		{
			"id": "00003",
			"status": 0,
			"name": "大长兴三号风机",
			"deviceId": "DCX-FJ-3",
			"dailyPower": "3.28MWh",
			"activePower": "1225.63kw",
			"windSpeed": "8.15m/s",
		},
		{
			"id": "00004",
			"status": 0,
			"name": "小长兴一号风机",
			"deviceId": "XCX-FJ-1",
			"dailyPower": "6.30MWh",
			"activePower": "2551.03kw",
			"windSpeed": "8.54m/s",
		},
		{
			"id": "00005",
			"status": 0,
			"name": "小长兴二号风机",
			"deviceId": "XCX-FJ-2",
			"dailyPower": "3.59MWh",
			"activePower": "1367.79kw",
			"windSpeed": "8.89m/s",
		},


	])
	const current = ref(0)
	const fieldList = ref([])
	const type = ref('')
	const owningSystem = ref(0)
	const goodsNum = computed(() => { //计算单个饮品添加到购物车的数量
		return (goods) => {
			let num = 0;
			goods.forEach(good => num += parseInt(good.number))
			return num;
		}
	})
	//对应值
	const getMappedText = (prop, value) => {
		let map = {
			1: '直流',
			2: '交流'
		}
		if (prop == 'deviceType') {
			return map[value]
		} else {
			return value
		}

	}
	onLoad(() => {
		// if(!isLogin.value) {
		// 	uni.navigateTo({url: '/pages/components/pages/login/login'})
		// }


		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel()
		eventChannel.on('getModelId', (data) => {
			// console.log("监控页面接收数据", data)
			modelId.value = data.data
			formatMonitor(modelId.value)
			fomatNavList(modelId.value)
			getOrders(true)
		})

	})
	onPullDownRefresh(() => {
		getOrders(false)
	})
	onReachBottom(() => {
		getOrders(false)
	})

	// tab栏切换
	const change = (e) => {
		console.log('e;', e.type, modelId.value)
		//console.log('e.index;',e.index)
		pageNum.value = 1
		type.value = e.type
		if (modelId.value == 3) { //储能
			owningSystem.value = e.type
		}
		getOrders(true)
	}
	const createQueryObj = (type, pageNum, pageSize) => {
		// console.log("type===", type)
		switch (type) {
			case '3':
				return {
					pageNum,
					pageSize,
					owningSystem: owningSystem.value,
				};
			case '4':
				return {
					pageNum,
					pageSize,
					deviceStatus: '',
				};
			default:
				return {
					pageNum,
					pageSize,
					deviceStatus: type
				};
		}
	}
	const getOrders = async (isRefresh = false) => {
		try {
			// 1. 定义请求映射表
			const API_MAP = {
				'1': reqWindMonintorList, // 风机（接口没有）
				'4': reqCharge, // 充电桩
				'3': reqStorageList // 储能
			};

			// 2. 显示加载状态
			uni.showLoading({
				title: '加载中'
			});

			// 3. 处理刷新逻辑
			if (isRefresh) {
				stationList.value = [];
				pageNum.value = 1;
			}

			// 4. 构建请求参数
			const params = createQueryObj(modelId.value, pageNum.value, pageSize.value);

			// 5. 验证并获取请求方法
			const fetchMethod = API_MAP[modelId.value];
			if (!fetchMethod) {
				throw new Error(`未找到modelId为 ${modelId.value} 的请求方法`);
			}

			// 6. 发起请求并处理响应
			const {
				data
			} = await fetchMethod(params);
			const orderList = data?.data?.list || [];

			if (orderList.length > 0) {
				// 使用扩展运算符替代concat，性能更好
				stationList.value = [...stationList.value, ...orderList];
				pageNum.value += 1;
			} else if (pageNum.value > 1) {
				// 没有更多数据时的提示
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
			}

			return orderList; // 返回获取的数据便于后续处理
		} catch (error) {
			console.error('没有此接口:', error);
			uni.showToast({
				title: '数据接口加载失败',
				icon: 'none'
			});
			throw error; // 重新抛出错误供上层处理
		} finally {
			// 确保总是关闭加载状态
			uni.stopPullDownRefresh();
			uni.hideLoading();
		}
	};
	const detail = (id) => {
		uni.navigateTo({
			url: '/pages/components/pages/orders/detail?id=' + id
		})
	}
	//根据模块展示不同字端
	const formatMonitor = (modelId) => {
		let res = globalConfig.monitorField[modelId]

		fieldList.value = res
	}
	const fomatNavList = (modelId) => {
		let res = globalConfig.monitorTabList[modelId]
		tabList.value = res
	}
	onMounted(() => {})
</script>

<style lang="scss" scoped>
	.left-margin {
		margin-left: 10rpx;
	}

	.container {
		.orders-list {
			.li {
				min-height: 458rpx;
				margin-bottom: 20rpx;
				padding: 10rpx 14rpx 12rpx 18rpx;
				background-color: #fff;

				.top {
					height: 108rpx;
					width: 100%;

					.top-content {
						display: flex;
						flex: 1;
						justify-content: space-between;
						border-bottom: 1px solid #d9d9d9;

						.status-collect {
							flex: 3;

							.setting {
								width: 105rpx;
								height: 28rpx;
								font-size: 20rpx;
								margin-left: 13rpx;
								margin-top: 18rpx;
								margin-bottom: 7rpx;
								display: flex;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}

						.check {
							flex: 2;
							line-height: 85rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #75B2EB;

							::v-deep {
								.navigator-wrap {
									display: flex;
								}
							}


							.txt {
								margin-right: 10rpx;
							}
						}

					}

					.upload {
						.img {
							width: 80rpx;
							height: 80rpx;
							padding-left: 20rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.65);
							line-height: 44rpx;
						}
					}

					.left {
						.stationName {
							flex: 1;
							min-width: 99rpx;
							height: 50rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 28rpx;
							margin-left: 12rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #333333;
							line-height: 75rpx;
						}

						.statusView {
							display: flex;
							margin: 8rpx 0 20rpx 0;
						}

						.status1 {

							width: 105rpx;
							height: 28rpx;
							font-size: 20rpx;
							margin-left: 13rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;

							.com-state {
								display: flex;
								align-items: center;
							}

							.state {
								width: 20rpx;
								height: 20rpx;
								background-size: 100%;
							}
						}
					}
				}

				.bottom {
					min-height: 350rpx;
					margin-top: 24rpx;
					width: 100%;

					.bottom-list {
						padding: 0 11rpx;
						margin-bottom: 22rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;
						display: flex;
						justify-content: space-between;
					}
				}
			}

		}
	}
</style>